<template>
  <div class="content" >
    <div class="box" >
        <div class="logo" ><img src="@/assets/img/icon/logo.png" alt="qingyang"></div>
        <div class="title" >专业的云端个人空间</div>
        <div class="form" >
          <el-form :model="form" label-width="0px">
            <el-form-item>
              <el-input prefix-icon="el-icon-user" v-model="form.userNumber" placeholder="预览账号：18700692544" style="width:100%" ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input prefix-icon="el-icon-lock" v-model="form.userPassword" placeholder="预览密码：123456" style="width:100%"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="auto" >
          <div><el-checkbox v-model="checked">自动登录</el-checkbox></div>
          <div class="auto-r" >忘记密码</div>
        </div>
        <div class="btn" >
          <el-button type="primary" style="width:100%" @click="loginFun" >登录</el-button>
        </div>
        <div class="otherway" >
          <div class="otherway-l" >
            <span>其他登录方式</span>
            <svg t="1616051599093" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3855" width="24" height="24"><path d="M352.814545 385.396364m-33.512727 0a33.512727 33.512727 0 1 0 67.025455 0 33.512727 33.512727 0 1 0-67.025455 0Z" fill="#50B674" p-id="3856"></path><path d="M502.690909 384.465455m-33.512727 0a33.512727 33.512727 0 1 0 67.025454 0 33.512727 33.512727 0 1 0-67.025454 0Z" fill="#50B674" p-id="3857"></path><path d="M576.232727 534.341818m-23.272727 0a23.272727 23.272727 0 1 0 46.545455 0 23.272727 23.272727 0 1 0-46.545455 0Z" fill="#50B674" p-id="3858"></path><path d="M694.458182 536.203636m-23.272727 0a23.272727 23.272727 0 1 0 46.545454 0 23.272727 23.272727 0 1 0-46.545454 0Z" fill="#50B674" p-id="3859"></path><path d="M512 0C229.003636 0 0 229.003636 0 512s229.003636 512 512 512 512-229.003636 512-512S794.996364 0 512 0z m-87.505455 630.225455c-26.996364 0-48.407273-5.585455-75.403636-11.17091l-75.403636 37.236364 21.410909-64.232727c-53.992727-37.236364-85.643636-85.643636-85.643637-145.221818 0-102.4 96.814545-182.458182 215.04-182.458182 105.192727 0 198.283636 64.232727 216.901819 150.807273-6.516364-0.930909-13.963636-0.930909-20.48-0.93091-102.4 0-182.458182 76.334545-182.458182 170.356364 0 15.825455 2.792727 30.72 6.516363 44.683636-7.447273 0-13.963636 0.930909-20.48 0.93091z m314.647273 75.403636l15.825455 53.992727-58.647273-32.581818c-21.410909 5.585455-42.821818 11.170909-64.232727 11.170909-102.4 0-182.458182-69.818182-182.458182-155.461818s80.058182-155.461818 182.458182-155.461818c96.814545 0 182.458182 69.818182 182.458182 155.461818 0 47.476364-31.650909 90.298182-75.403637 122.88z" fill="#50B674" p-id="3860"></path></svg>
            <svg t="1616051706451" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4003" width="24" height="24"><path d="M512 0C229.003636 0 0 229.003636 0 512s229.003636 512 512 512 512-229.003636 512-512S794.996364 0 512 0z m210.385455 641.396364c-7.447273 9.309091-26.996364-1.861818-41.89091-32.581819-3.723636 13.963636-13.032727 36.305455-34.443636 64.232728 35.374545 8.378182 44.683636 42.821818 33.512727 61.44-8.378182 13.032727-26.996364 24.203636-59.578181 24.203636-58.647273 0-83.781818-15.825455-95.883637-26.996364-1.861818-2.792727-5.585455-3.723636-10.24-3.723636-4.654545 0-7.447273 0.930909-10.24 3.723636-11.170909 11.170909-37.236364 26.996364-95.883636 26.996364-32.581818 0-52.130909-11.170909-59.578182-24.203636-12.101818-18.618182-1.861818-53.061818 33.512727-61.44-20.48-27.927273-29.789091-50.269091-34.443636-64.232728-13.963636 30.72-34.443636 42.821818-41.890909 32.581819-5.585455-8.378182-8.378182-26.065455-7.447273-38.167273 3.723636-46.545455 34.443636-85.643636 53.061818-106.123636-2.792727-5.585455-8.378182-40.029091 14.894546-63.301819v-1.861818c0-92.16 65.163636-158.254545 148.014545-158.254545 81.92 0 148.014545 66.094545 148.014546 158.254545v1.861818c23.272727 23.272727 17.687273 57.716364 14.894545 63.301819 17.687273 20.48 49.338182 59.578182 53.061818 106.123636 0.930909 12.101818-0.930909 29.789091-7.447272 38.167273z" fill="#30A5DD" p-id="4004"></path></svg>
            <svg t="1616051725660" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4147" width="27" height="27"><path d="M480.8 457.76a271.04 271.04 0 0 0-37.28 2.72c-96 13.44-166.72 75.04-157.92 137.44s93.6 101.92 189.6 88.48 166.72-75.04 157.92-137.44c-7.68-54.08-73.12-91.04-152.32-91.2z m-23.36 211.52a122.08 122.08 0 0 1-24 2.4c-48 0-88-27.52-96-68.32-9.28-48 29.44-95.2 86.56-106.24s110.88 18.4 120 66.08-29.44 95.04-86.56 106.08z" fill="#F56467" p-id="4148"></path><path d="M512 73.28A438.72 438.72 0 1 0 950.72 512 438.72 438.72 0 0 0 512 73.28z m-43.84 666.88c-150.24 0-272-78.56-272-176S378.56 314.72 448 314.72c29.28 0 86.56 21.76 46.4 90.88a246.24 246.24 0 0 0 34.08-10.08c32-9.12 76.96-18.24 107.68 0 51.04 29.6 0 77.12 0 82.4s102.4 5.28 102.4 87.2c0.32 96.48-120.16 175.04-270.4 175.04z m213.76-358.88a56 56 0 0 0-47.2-16 16.96 16.96 0 0 1-17.28-14.4 12.16 12.16 0 0 0 0 2.4v-4.8a12.16 12.16 0 0 0 0 2.4 20.48 20.48 0 0 1 17.28-17.28 77.28 77.28 0 0 1 68.32 18.56c32 28.48 18.72 75.68 18.72 75.68a21.28 21.28 0 0 1-20.48 17.28h-1.76a12.48 12.48 0 0 1-12.8-16.8 49.44 49.44 0 0 0-4.8-47.04z m120.16 60.64a29.6 29.6 0 0 1-26.08 25.92 22.08 22.08 0 0 1-19.68-25.92A139.2 139.2 0 0 0 736 336c-34.88-50.08-109.92-41.28-109.92-41.28A26.24 26.24 0 0 1 599.84 272v2.88-5.6 2.72a26.56 26.56 0 0 1 26.24-23.52 188.32 188.32 0 0 1 136.16 47.04c58.08 55.04 39.84 146.4 39.84 146.4z" fill="#F56467" p-id="4149"></path><path d="M459.36 547.04a17.6 17.6 0 1 0 17.6 17.6 17.6 17.6 0 0 0-17.6-17.6zM415.04 570.24a43.52 43.52 0 0 0-18.4 4.32 32 32 0 0 0-20.64 38.56 32 32 0 0 0 42.88 9.12 32 32 0 0 0 20.64-38.72 25.76 25.76 0 0 0-24.48-13.28z" fill="#F56467" p-id="4150"></path></svg>
          </div>
          <div class="otherway-r" @click="registerFun" >注册账户</div>
        </div>
    </div>
  </div>
</template>
<script>
import {
  reactive,
  toRefs,
  inject
} from "vue";
import { useRouter } from "vue-router"
import { useStore } from 'vuex'
// 使用版本为3.0.0-rc1,新版会报错
import { JSEncrypt } from "jsencrypt"
import { ElMessage } from 'element-plus'
export default {
  name: "login",
  setup() {
    const router = useRouter()
    const store = useStore()
    const Request = inject("$Request")
    const Api = inject("$Api")
    const state = reactive({
      form:{
        userNumber:'',
        userPassword:''
      },
      checked:false
    });
    // login function
    const loginFun = ()=> {
      const params = {
        userNumber:state.form.userNumber,
        userPassword:state.form.userPassword
      };
      const privateKey = `-----BEGIN PUBLIC KEY-----
      MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDorvAXRx6i5dDhPSbC+SMDKo0f
      FQWoK43y8zIjYPsvwyEMtz0Rd0yqq4kGXeSIO/X7Rcsqvmt2EVCGH/aw3AQt0GQd
      yb4KTEfYsz56JzyYHGi4ubSwsQP2SR4luPg8vQUzusyxuQ2+6wOpKTAD6mOjlJco
      otgGNJu9q1IxtIlqhQIDAQAB
      -----END PUBLIC KEY-----`
      const encryptor = new JSEncrypt()
      encryptor.setPublicKey(privateKey)
      const rsaParams = encryptor.encrypt(JSON.stringify(params))//rsaPassWord 就是得出来的加密串
      Request.requestPost({ rsaParams }, Api.apiUser.login)
        .then((res) => {
          console.log(res)
          if (res.data.code == "0") {
            userInfo()
            sessionStorage.setItem("token",res.data.data.token);
          } else {
            ElMessage.error(res.data.message)
          }
        })
        .catch((err) => {
          console.error(err);
        });
    }
    const registerFun = ()=> {
      router.push({path:'/register'})
    }
    const userInfo = ()=> {
      Request.requestPost({}, Api.apiUser.userinfo)
        .then((res) => {
            store.dispatch('user/getUserInfo',res.data.data)
            router.push({ path: "/" });
        })
        .catch((err) => {
          console.error(err);
        });
    }
    return {
      ...toRefs(state),
      loginFun,
      registerFun,
      userInfo
    };
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variable.scss";
.content{
  background: url("../../assets/img/bg/login_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  .box{
    width: 25vw;
    height: auto;
    display: flex;
    flex-direction: column;
    .logo{
      img{
        height: 42px;
      }
    }
    .title{
      text-align: center;
      color: $gray-weight;
      padding: 16px 0;
    }
    .form{
      padding: 16px 0;
    }
    @mixin rowstyle{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
    .auto{
      @include rowstyle;
      padding: 8px 0;
      cursor: pointer;
      .auto-r{
        color: $blue-weight
      }
    }
    .btn{
      padding: 8px 0;
    }
    .otherway{
      @include rowstyle;
      padding: 8px 0;
      cursor: pointer;
      .otherway-l{
        display: flex;
        flex-direction: row;
        align-items: center;
        svg{
          padding-left: 8px;
        }
      }
      .otherway-r{
        color: $blue-weight
      }
    }
  }
}
</style>